@keyframes rotate-in{
    0%{transform: rotateY(0deg);}
    
    100%{transform: rotateY(90deg);}
}

@keyframes rotate-out{
    0%{transform: rotateY(270deg);}
    
    100%{transform: rotateY(360deg);}

}
#example{
    background: rgb(112, 112, 112);
}
#login-div {
    background: url(/login/image/1.jpg);
    position: relative;
    background-size:100% 100%;  
    width: 100%;
    height: 100%;
    display: inline-block; 

}
#signup-div {
    background: url(/login/image/2.jpg);
    position: relative;
    background-size:100% 100%;  
    width: 100%;
    height: 100%;
    display: inline-block; 

}
body{
    padding: 40px;
    margin: 0px;
}
#form-container{
    background-color: antiquewhite;
    position: absolute;
  top: 50%;
  left: 50%;
}
ul{
    list-style: none;
    display: block;
}

.login-rotate-leave-active{
    animation: rotate-in 0.5s;
    animation-timing-function: ease-in;

}
.login-rotate-enter-active
{
    animation: rotate-out 0.5s;
    animation-timing-function: ease-in;

}
